<template>
	<view class="game-index-list">
		<uv-index-list :index-list="indexList">
			<template v-slot:header>
				<!-- 搜索框 -->
				<view class="xzy-search">
					<uv-search placeholder="请输入检索内容" v-model="inputKey" :showAction="false" @search="searchInput"
						@clear="searchInput"></uv-search>
				</view>
				<!-- 热门游戏 -->
				<view class="hot-games" v-if="hotGames.length">
					<view class="hot-title">热门游戏</view>
					<view class="hot-games-item" v-for="(item, index) in hotGames" :key="index" @click="handleHero(item.gamesInfo)">
						{{ item.gamesInfo.name }}
					</view>
				</view>
			</template>
			<template v-for="(item, index) in gamesList" :key="index">
				<!-- #ifdef APP-NVUE -->
				<uv-index-anchor :text="item.letter"></uv-index-anchor>
				<!-- #endif -->
				<uv-index-item>
					<!-- #ifndef APP-NVUE -->
					<uv-index-anchor :text="item.letter"></uv-index-anchor>
					<!-- #endif -->
					<view class="list-cell" v-for="(cell, index) in item.letterVo" :key="index">
						<view class="flx-center" @click="handleHero(cell)">
							<image :src="cell.iconUrl" mode="" class="games-img"></image>
							<view class="">
								{{ cell.name }}
							</view>
						</view>
					</view>
				</uv-index-item>
			</template>
		</uv-index-list>
	</view>
</template>

<script setup>
	import {
		ref,
		watch
	} from 'vue'
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	import {
		GetAllGamesInfoApi
	} from '@/api/modules/send.js'
	// 定义事件
	const emit = defineEmits(['select-game','select-more-game'])

	// 响应式数据
	const inputKey = ref('')
	const gamesList = ref({})
	const originalGamesList = ref({})
	const indexList = ref([])
	const searchTimeout = ref(null)
	const hotGames = ref([])

	// 搜索功能
	const searchInput = () => {
		// 清除之前的定时器
		if (searchTimeout.value) {
			clearTimeout(searchTimeout.value)
		}

		searchTimeout.value = setTimeout(() => {
			const searchTerm = inputKey.value.trim().toLowerCase()

			// 如果搜索词为空，恢复原始数据
			if (!searchTerm) {
				gamesList.value = JSON.parse(JSON.stringify(originalGamesList.value))
				indexList.value = gamesList.value.map(item => item.letter)
				return
			}

			// 过滤游戏列表
			const filteredGames = originalGamesList.value.filter(item => {
				// 过滤每个字母下的游戏列表
				const filteredList = item.letterVo.filter(game => game.name.toLowerCase().includes(searchTerm))

				// 如果该字母下有匹配的游戏，保留这个分组
				if (filteredList.length > 0) {
					item.letterVo = filteredList
					return true
				}
				return false
			})

			// 更新显示的游戏列表和索引列表
			gamesList.value = filteredGames
			indexList.value = filteredGames.map(item => item.letter)
		}, 300) // 300ms 防抖延迟
	}

	// 选择游戏
	const handleHero = game => {
		if (pageType.value == 1) {
			emit('select-more-game', game)
		} else {
			emit('select-game', game)
		}

	}

	const getAllGamesInfo = async () => {
		const {
			data
		} = await GetAllGamesInfoApi()
		gamesList.value = data.gamesInfoLetterVoList
		indexList.value = data.gamesInfoLetterVoList.map(item => item.letter)
		hotGames.value = data.gamesCustomizationList
		originalGamesList.value = data.gamesInfoLetterVoList
	}
	const pageType = ref()
	onLoad((option) => {
		pageType.value = option.type
	})
	onShow(() => {
		getAllGamesInfo()
	})
</script>

<style scoped lang="scss">
	.game-index-list {
		width: 100%;
		height: 100%;
		background-color: #fff;

		.xzy-search {
			padding: 20rpx;
		}

		.hot-games {
			width: calc(100% - 40rpx);
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
			margin: auto;

			.hot-title {
				width: 100%;
				font-size: 28rpx;
				color: #222222;
				font-weight: 600;
				margin-bottom: 20rpx;
			}

			.hot-games-item {
				background: #f5f5f5;
				border-radius: 16rpx;
				padding: 22rpx 24rpx;
				color: #222222;
				font-size: 28rpx;
				margin-bottom: 24rpx;
				display: flex;
				justify-content: center;
				margin-right: 24rpx;
			}
		}

		.games-img {
			width: 80rpx;
			height: 80rpx;
			border-radius: 10rpx !important;
			margin: 10rpx;
		}
	}
</style>